<template>
  <div class="message-container">
    <!-- 修复后的标签页 -->
    <el-tabs v-model="activeTab" class="message-tabs" @tab-click="handleTabChange">
      <el-tab-pane v-for="tab in tabs" :key="tab.name" :label="tab.label" :name="tab.name" />
    </el-tabs>

    <!-- 动态组件容器 -->
    <div class="component-wrapper">
      <component :is="activeComponent" v-if="activeComponent" :data="currentTabData" @message-read="handleMessageRead"
        @reply="handleReply" @like="handleLike" @follow="handleFollow" />
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'
import { ElTabs, ElTabPane } from 'element-plus'
import type { TabsPaneContext } from 'element-plus'
import MessageList from '@/components/MessageList.vue'
import CommentList from '@/components/CommentList.vue'
import AgreeCollectionList from '@/components/AgreeCollectionList.vue'
import FollowerList from '@/components/FollowerList.vue'

// 类型定义
type TabName = 'messages' | 'comments' | 'agreements' | 'followers'

interface TabConfig {
  name: TabName
  label: string
  component: any
}

// 标签页配置
const tabs: TabConfig[] = [
  { name: 'messages', label: '我的消息', component: MessageList },
  { name: 'comments', label: '评论和@', component: CommentList },
  { name: 'agreements', label: '赞和收藏', component: AgreeCollectionList },
  { name: 'followers', label: '新增关注', component: FollowerList }
]

// 响应式状态
const activeTab = ref<TabName>('messages')

// 假数据源
const mockData = {
  messages: [
    {
      id: 1,
      type: 'system',
      content: '【系统通知】您的账号安全等级已提升',
      time: '10分钟前',
      count: 1
    },
    {
      id: 2,
      type: 'interaction',
      content: '用户「设计达人」收藏了你的作品',
      time: '2小时前',
      user: { name: '设计达人', avatar: 'https://example.com/avatar1.jpg' },
      count: 3
    }
  ],
  comments: [
    {
      id: 1,
      user: { name: 'Vue爱好者', avatar: 'https://example.com/avatar2.jpg' },
      content: '@你 这个组件封装思路太棒了！',
      post: 'Vue3实践指南',
      time: '08:30'
    }
  ],
  agreements: [
    {
      id: 1,
      type: 'like',
      user: { name: 'UI设计师', avatar: 'https://example.com/avatar3.jpg' },
      targetType: '作品',
      target: '数据可视化设计',
      time: '30分钟前'
    }
  ],
  followers: [
    {
      id: 1,
      user: { name: 'Node开发者', avatar: 'https://example.com/avatar4.jpg' },
      followTime: '刚刚',
      mutual: false
    }
  ]
}

// 计算属性
const currentTabData = computed(() => mockData[activeTab.value])
const activeComponent = computed(() =>
  tabs.find(tab => tab.name === activeTab.value)?.component
)

// 事件处理
const handleTabChange = (tab: TabsPaneContext) => {
  activeTab.value = tab.paneName as TabName
}

const handleMessageRead = (messageId: number) => {
  mockData.messages = mockData.messages.map(msg =>
    msg.id === messageId ? { ...msg, count: 0 } : msg
  )
}

const handleReply = (payload: { commentId: number; content: string }) => {
  console.log('回复内容:', payload)
}

const handleLike = (commentId: number) => {
  console.log('点赞评论:', commentId)
}

const handleFollow = (userId: number) => {
  mockData.followers = mockData.followers.map(user =>
    user.id === userId ? { ...user, mutual: true } : user
  )
}
</script>

<style lang="less" scoped>
.message-container {
  max-width: 800px;
  margin: 20px auto;
  padding: 20px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);

  // 修复标签栏样式
  :deep(.el-tabs__header) {
    margin: 0 0 20px;
  }

  :deep(.el-tabs__nav-wrap)::after {
    background-color: transparent;
  }

  :deep(.el-tabs__active-bar) {
    height: 3px;
    background-color: #409eff;
  }

  :deep(.el-tabs__item) {
    padding: 0 20px;
    height: 40px;
    line-height: 40px;
    font-size: 14px;

    &.is-active {
      color: #409eff;
    }
  }
}

.component-wrapper {
  min-height: 400px;
  padding: 15px;
  background: #f8f8f8;
  border-radius: 4px;

  // 统一组件容器样式
  .message-container,
  .comment-list,
  .agree-container,
  .follower-container {
    width: 100%;
    margin: 0;
    padding: 0;
  }
}
</style>